<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" table-api="/adminapi/addonGroup" :hide-buttons="[]" :cache-table="!getDev()">
      <template #addons_slot="{ row }">
        <div>
          <ul class="flex flex-wrap">
            <template v-for="(item, key) in row.explain.addon_msg" :key="key">
              <li v-if="item" class="relative float-left w-10 h-10 m-1 cursor-pointer hover:shadow-md">
                <div class="leading-0">
                  <el-tooltip effect="dark" :content="item.title" placement="top-start">
                    <el-image :src="item.icon" alt="" fit="contain" class="rounded-10px overflow-hidden">
                      <template #error>
                        <img src="@/assets/default/addon.png" alt="" class="w-10 h-10 rounded-10px overflow-hidden" />
                      </template>
                    </el-image>
                  </el-tooltip>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </template>
    </dk-table>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

// 自动判断开发模式启用缓存
// @ts-ignore
import { getDev } from '@/utils/auth'
// @ts-ignore
const DkTableRef = ref()

onMounted(() => {
  console.log(DkTableRef.value.DkTable)
  DkTableRef.value.DkTable.before = {
    api: (params) => {
      console.log(params)
    }
  }
})
</script>
<style lang="scss" scoped></style>
